<template>
  <div v-if="list.length > 0">
    <div class="bp-input bp-brand">
      <div>品牌</div>
      <div class="input brand">{{list[0].brandName}}</div>
    </div>
      <div class="bp-input bp-brand"  style="margin-top:-1px;">
        <div>门店</div>
        <div class="input">
          <select v-if="list.length > 0"  @change="choseShop">
            <option v-for="(li,index) in list" :value="index">{{li.name}}</option>
          </select>
        </div>
      </div>
      <div class="bp-input">
        <div>消费金额</div>
        <div class="input"><input type="text" name="test1" placeholder="确认金额后输入" v-model='price' @input="totFun"></div>
      </div>
      <div class="bp-notjion">
        <div class="checkbox"><label><input type="checkbox"  @click="bindCheckbox">输入不参与优惠金额</label></div>
        <div class="bp-input" style="margin-bottom:15px;" v-if="chek">
          <div>不参与优惠金额</div>
          <div class="input"><input type="text" name="test2" placeholder="确认金额后输入"  v-model='notjion' @input="totFun"></div>
        </div>
      </div>
      <div style="margin-bottom:.75rem" v-if="list[index].discountRate && list[index].discountRate != 1 || list[index].present && list[index].present != '' " >
        <div class="bp-input bp-discont" style="margin-top:0px;" v-if="list[index].discountRate && list[index].discountRate != 1">
          <div ><span class="font">折</span>优惠:{{((list[index].discountRate) * 10).toFixed(1)}}折 {{list[index].discountRemark}}</div>
          <!-- <div class="input" @click="readDetial(100)" v-if="list[index].discountRemark">优惠说明</div> -->
        </div>
        <div class="bp-input bp-discont" style="margin-top:-0.05rem;" v-if="list[index].present" >
          <div style="-webkit-box-flex: 1;"><span class="font" style="background:#ff6633">送</span>{{list[index].present}} {{list[index].presentRemark}}</div>
          <!-- <div class="input" style="color:#ff6633" @click="readDetial(200)"  v-if="list[index].presentRemark">使用说明</div> -->
        </div>
      </div>
      <div class="bp-input" style="margin-top:0px;">
        <div>实际支付</div>
        <div class="input" style="text-align:right;font-weight:400">{{totprice}}</div>
      </div>
      <div class="bp-remark"><textarea placeholder="备注信息" v-model='remark'></textarea></div>
      <!-- <div class="pos-btn">
        <div class="bp-submit pos-submit">刷卡支付</div>
        <div class="bp-submit" @click="createOrder">立即支付</div>
      </div> -->
      <div class="pos-btn">
        <!-- <router-link  tag="div" class="pos-submit" :to="{ name: 'PostPay'}" v-if="list[index].posPay">刷卡支付</router-link> -->
        <div class="pos-submit" v-if="list[index].posPay" @click="postHref">刷卡支付</div>
        <div class="now-submit" @click="createOrder">立即支付</div>
      </div>
      <!-- 优惠说明 -->
      <div class="say-detial" v-show="isshow">
        <div class="use-say">
          <div>{{detial.title}}</div>
          <ul>
            <pre>{{detial.des}}</pre>
            <!-- <li>优惠说明优惠说明优惠说明</li> -->
            <!-- <li>优惠说明优惠说明优惠说明</li> -->
          </ul>
        </div>
        <span class="icon-cl ose iconfont close" @click="closeInfo"></span>
      </div>
      <div id="mask" v-show="isshow" @click="closeInfo"></div>
      <!-- 链接入口 -->
      <!-- <div class="bp-link">买单记录<span class="icon-jiantouyou1 iconfont" style="position: relative;top: .05rem;"></span></div> -->
      <router-link  tag="div" class="bp-link" :to="'/active/orderlist'" v-show="iswx" >买单记录</router-link>
  </div>
</template>
<script>
  /* 再此定义JS，采用ES6标准格式 */
  import Vue from 'vue'
  // import Lockr from 'lockr'
  export default {
    name: 'buypay',
    data () {
      return {
        iswx: false,
        index: 0,
        chek: false,
        price: '',
        notjion: '',
        totprice: '',
        isshow: false,
        remark: '',
        detial: {title: '', des: ''},
        list: []
      }
    },
    mounted: function () {
      if (Vue.prototype.$payWay === 200) {
        this.iswx = false
      } else {
        this.iswx = true
      }
      this.init()
    },
    methods: {
      init: function () {
        // alert(Vue.prototype.$payWay)
        // console.log(this.payWay())
        // if (this.payWay() === 'micromessenger') {
        //   alert(100)
        // }
        // console.log(window.sessionStorage.getItem(.cacheKey))
        this.getList()
      },
      totFun: function (e) {
        // console.log(e)
        // if (!e.target.value) return
        if (!/^\d*\.?\d{0,5}$/.test(e.target.value)) {
          if (e.target.name === 'test1') {
            this.price = ''
            this.notjion = ''
          } else if (e.target.name === 'test2') {
            this.notjion = ''
          }
          // console.log(444)
        }
        // console.log(this.value('2323'))
        // let price = this.price ? this.price : 0
        // let notjion = this.notjion ? this.notjion : 0
        // this.price = parseFloat(this.price) > 0 ? parseFloat(this.price) : 0
        // this.notjion = parseFloat(this.notjion) > 0 ? parseFloat(this.notjion) : 0
        // if (!/^[0-9]{1,}(?:.[0-9])?$/.test(e.target.value)) {
        //   // alert('不能大于消费金额')
        //   return false
        // }
        // console.log(this.price)
        // console.log(this.notjion)
        if (this.notjion && this.price) {
          if (parseFloat(this.notjion) > parseFloat(this.price)) {
            // this.$layer.toast({
            //   icon: 'icon-check', // 图标clssName 如果为空 toast位置位于下方,否则居中
            //   content: '不能大于消费金额',
            //   time: 2000 // 自动消失时间 toast类型默认消失时间为2000毫秒
            // })
            alert('不能大于消费金额')
            this.notjion = ''
          }
        }
        let price = 0
        let notjion = 0
        if (this.price && this.price !== '.') {
          price = parseFloat(this.price)
        }
        if (this.notjion && this.notjion !== '.') {
          notjion = parseFloat(this.notjion)
        }
        // let notjion = parseFloat(this.notjion)
        if (this.chek) {
          this.totprice = ((price - notjion) * this.list[this.index].discountRate + notjion).toFixed(2)
        } else {
          this.totprice = (price * this.list[this.index].discountRate).toFixed(2)
        }
      },
      choseShop: function (e) {
        let index = parseInt(e.target.value)
        this.price = 0
        this.notjion = 0
        this.totprice = 0
        this.index = index
      },
      bindCheckbox: function () {
        this.chek = !this.chek
        // let chek = !this.chek
        let price = 0
        let notjion = 0
        if (this.price) {
          price = parseFloat(this.price)
        }
        if (this.notjion) {
          notjion = parseFloat(this.notjion)
        }
        // this.chek = chek
        if (this.chek) {
          this.totprice = ((price - notjion) * this.list[this.index].discountRate + notjion).toFixed(2)
        } else {
          this.totprice = (price * this.list[this.index].discountRate).toFixed(2)
        }
      },
      closeInfo: function () {
        this.isshow = false
      },
      readDetial: function (type) {
        this.detial.title = type === 100 ? '优惠说明' : '使用说明'
        this.detial.des = type === 100 ? this.list[this.index].discountRemark : this.list[this.index].presentRemark
        this.isshow = true
      },
      createOrder: function () {
        let _this = this
        if (Vue.prototype.$payWay === 300) {
          alert('请在微信或者支付宝里打开')
          return false
        }
        if (this.totprice <= 0) {
          _this.$layer.toast({
            icon: 'icon-check', // 图标clssName 如果为空 toast位置位于下方,否则居中
            content: '请输入消费金额',
            time: 2000 // 自动消失时间 toast类型默认消失时间为2000毫秒
          })
          return false
        }
        let notjion = this.chek ? this.notjion : 0
        let obj = {
          expenseAmount: this.price,
          noDiscountAmount: notjion,
          payMethod: 1,
          remark: this.remark,
          // payType: 1,
          payAmount: this.totprice,
          shopId: this.list[this.index].id,
          redirectUrl: _this.$Constants.CommonApiUrl.payPage
        }
        obj.payType = Vue.prototype.$payWay === 100 ? 1 : 2
        this.$EcHttpUtils.post('order/createOrder.json', obj).then(function (resp) {
          console.log(resp.data)
          if (resp.data.statusCode === 0) {
            let payInfoParams = resp.data.data.payInfoParam
            // 支付相关问题
            if (Vue.prototype.$payWay === 100) {
              let payInfoParam = {
                orderNo: payInfoParams.orderNo,
                redirectUrl: _this.$Constants.CommonApiUrl.payPage,
                body: '线下订单支付',
                appid: _this.$Constants.PAYAPPID,
                tradeType: 'JSAPI',
                openid: payInfoParams.openid,
                access_token: _this.$JzoAuth.getAccessToken()
              }
              _this.$tools.payWay(_this.$Constants.CommonApiUrl.wxPay, payInfoParam, 1)
            } else if (Vue.prototype.$payWay === 200) {
              let newpayInfoParam = {
                orderNo: payInfoParams.orderNo,
                redirectUrl: _this.$Constants.CommonApiUrl.payPage,
                subject: '线下订单支付',
                body: '线下订单支付'
              }
              _this.$tools.payWay(_this.$Constants.CommonApiUrl.aliPay, newpayInfoParam, 1)
            }
            // window.location.href = _this.$Constants.CommonApiUrl.ORDER + '/pay/wxpay/jsapi?orderId=' + orderId + '&redirect_url=' + _url + '&access_token=' + token
            // console.log(orderid)
          } else {
            _this.$layer.toast({
              icon: 'icon-check', // 图标clssName 如果为空 toast位置位于下方,否则居中
              content: resp.data.message,
              time: 2000 // 自动消失时间 toast类型默认消失时间为2000毫秒
            })
          }
        })
      },
      getList: function () {
        let _this = this
        this.$EcHttpUtils.get('shop/list.json', {trademarkIds: _this.$route.params.id}).then(function (resp) {
          if (resp.data.statusCode === 0) {
            let list = resp.data.data
            _this.list = list
            if (list.length <= 0) {
              alert('该品牌下暂无门店')
              _this.$router.go(-1)
              return false
            }
          }
        })
      },
      postHref: function () {
        if (Vue.prototype.$payWay !== 100) {
          alert('请在微信环境中打开')
          return false
        }
        if (this.totprice <= 0) {
          this.$layer.toast({
            icon: 'icon-check', // 图标clssName 如果为空 toast位置位于下方,否则居中
            content: '请输入消费金额',
            time: 2000 // 自动消失时间 toast类型默认消失时间为2000毫秒
          })
          return false
        }
        let notjion = this.chek ? this.notjion : 0
        let obj = {
          expenseAmount: this.price,
          noDiscountAmount: notjion,
          payMethod: 1,
          payType: 3,
          payAmount: this.totprice,
          remark: this.remark,
          shopId: this.list[this.index].id
          // redirectUrl: this.$Constants.CommonApiUrl.payPage
        }
        this.$Lockr.set('PostPay', obj)
        this.$router.push({name: 'PostPay'})
      }
    }
  }
</script>
<style scoped>
  .bp-input .input{overflow: hidden;}
</style>
